<template>
	<view class="content">
		<view class="content-bg">
			<view class="charts-box">
				 <qiun-data-charts type="column" :opts="{dataLabel:false,color:['#5dbddf','#637ae9'],xAxis:{rotateLabel:true},extra:{column:{seriesGap:2,width:10,barBorderCircle:true}}}" :chartData="chartData"/>
			</view>
		</view>
	</view>
</template>

<script>
	import {GetProcessQualificationRatesOfYear} from '../../common/procedure-api.js'
	
	export default {
		data() {
			return {
				chartData:{},
			};
		},
		onLoad(){
			console.log("onLoad>>>");
			this.loadData();
		},
		methods:{
			loadData(){
				GetProcessQualificationRatesOfYear().then(res=>{
					var result = JSON.parse(res);
					this.dataArray = result;
					this.setChartData(result);
				});
			},
			
			setChartData(data){
				var categories = [];
				
				var pwArray = [];
				var yzArray = [];
				var qxArray = [];
				var zzzjArray = [];
				var ql01Array = [];
				var qxxxArray = [];
				var bzArray = [];
				var jg01Array = [];
				var ql02Array = [];
				var qlzjArray = [];
				var rclArray = [];
				var jg02Array = [];
				var jgzjArray = [];
				var djArray = [];
				data.source.forEach(item => {
					categories.push(item.months);
					pwArray.push(item.抛丸);
					yzArray.push(item.铸造);
					qxArray.push(item.清洗);
					zzzjArray.push(item.铸造质检);
					ql01Array.push(item.清理一序);
					qxxxArray.push(item.清洗下线);
					bzArray.push(item.包装);
					jg01Array.push(item.机加1序);
					ql02Array.push(item.清理二序);
					qlzjArray.push(item.清理质检);
					rclArray.push(item.热处理);
					jg02Array.push(item.机加2序);
					jgzjArray.push(item.机加质检);
					djArray.push(item.点胶);
				});
				var mix = {
					"categories": categories,
					"series": [ 
						{ "name": "抛丸","data": pwArray }, 
						{ "name": "铸造","data": pwArray }, 
						{ "name": "清洗","data": yzArray }, 
						{ "name": "铸造质检","data": zzzjArray }, 
						{ "name": "清理一序","data": ql01Array }, 
						{ "name": "清洗下线","data": ql01Array }, 
						{ "name": "包装","data": bzArray }, 
						{ "name": "机加1序","data": jg01Array }, 
						{ "name": "清理二序","data": ql02Array }, 
						{ "name": "清理质检","data": rclArray }, 
						{ "name": "热处理","data": rclArray }, 
						{ "name": "机加2序","data": jg02Array }, 
						{ "name": "机加质检","data": jgzjArray },
						{ "name": "点胶","data": djArray }
					]
				};
				this.chartData = mix;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("./procedure.css");
</style>
